<template>
  <el-card header="帮助中心" class="soft-card">
    <div class="help-content" v-html="htmlContent" style="font-size: 1.08rem; color: #6a4fa3;"></div>
  </el-card>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import MarkdownIt from 'markdown-it'

const htmlContent = ref('加载中...')
const md = new MarkdownIt()

async function loadHelpMd() {
  try {
    const res = await fetch('/HELP.md?_t=' + Date.now())
    if (!res.ok) throw new Error('加载失败')
    const text = await res.text()
    htmlContent.value = md.render(text)
  } catch (e) {
    htmlContent.value = '帮助文档加载失败！'
  }
}

onMounted(() => {
  loadHelpMd()
})
</script>
<style scoped>
.help-content {
  line-height: 1.8;
  padding: 12px 8px;
}
</style>
